<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="row" style="margin: 0 auto; width: 1024px">
    <p></p>
    <div class="row">
        <div class="col-lg-2">
            <button class="btn btn-success" data-toggle="modal" data-target="#addModal">新增</button>
            <button class="btn btn-danger" id="deleteMulti">删除</button>
        </div>
        <div class="col-lg-5"></div>
        <div class="col-lg-2">
            <select class="form-control" name="search_type" id="search_type">
                <option value="number">通过工号查询</option>
                <option value="name">通过姓名查询</option>
            </select>
        </div>
        <div class="col-lg-2">
            <input name="keyword" id="keyword" type="text" class="form-control" placeholder=""/>
        </div>
        <div class="col-lg-1">
            <button class="btn btn-default" id="search_button">查询</button>
        </div>
    </div>
    <div class="col-lg-12">
        <table class="table table-striped">
            <thead>
            <tr>
                <td>序号</td>
                <td>工号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>密码</td>
                <td>年龄</td>
                <td>出生日期</td>
                <td>操作</td>
            </tr>

            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

<!--新增模态框-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">新增</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>工号</label>
                    <input name="number" type="text" class="form-control" id="number" placeholder="工号">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>姓名</label>
                    <input name="name" type="text" class="form-control" id="name" placeholder="姓名">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>性别</label>
                    <select class="form-control" name="sex" id="sex">
                        <option selected="selected" value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>密码</label>
                    <input name="password" type="password" class="form-control" id="password" placeholder="密码">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>年龄</label>
                    <input name="age" type="number" class="form-control" id="age" placeholder="年龄">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>生日</label>
                    <input name="birthday" type="date" class="form-control" id="birthday" placeholder="生日">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addSave">保存</button>
            </div>
        </div>
    </div>
</div>
<!--编辑模态框-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>工号</label>
                    <input name="number" type="text" class="form-control" id="enumber" placeholder="工号">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>姓名</label>
                    <input name="name" type="text" class="form-control" id="ename" placeholder="姓名">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>性别</label>
                    <select class="form-control" name="sex" id="esex">
                        <option selected="selected" value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>密码</label>
                    <input name="password" type="password" class="form-control" id="epassword" placeholder="密码">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>年龄</label>
                    <input name="age" type="number" class="form-control" id="eage" placeholder="年龄">
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>生日</label>
                    <input name="birthday" type="date" class="form-control" id="ebirthday" placeholder="生日">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="editSave">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>

    let editIndex = null;

    // 准备数据
    let data = [
        [0001, "ert", "女", "1234", 44, "2077-1-1"],
        [0002, "ertr", "男", "1234", 44, "2077-1-1"],
        [0003, "erttt", "女", "1234", 44, "2077-1-1"],
        [0004, "etete", "女", "1234", 44, "2077-1-1"],
    ];

    function showList(arr = data) {

        // 清空列表
        $("tbody").html("");

        // 遍历列表数据
        for (let i = 0; i < arr.length; i++) {
            let tr = $(`
            <tr>
                <td><input type="checkbox" name="serial_number" value="${i}"></td>
                <td>${arr[i][0]}</td>
                <td>${arr[i][1]}</td>
                <td>${arr[i][2]}</td>
                <td>${arr[i][3]}</td>
                <td>${arr[i][4]}</td>
                <td>${arr[i][5]}</td>
                <td><button class="btn-xs btn-warning" value="${i}" name="editButton" data-toggle="modal" data-target="#editModal">编辑</button></td>
            </tr>
        `);

            $("tbody").append(tr);
        }
    }

    showList();

    $("#addSave").click(function () {
        let row = [
            $("#number").val(),
            $("#name").val(),
            $("#sex").val(),
            $("#password").val(),
            $("#age").val(),
            $("#birthday").val(),
        ];

        data.push(row);

        showList();

        clearInput();

        $('#addModal').modal('hide')
    });


    $("#editSave").click(
        function () {
            let row = [
                $("#enumber").val(),
                $("#ename").val(),
                $("#esex").val(),
                $("#epassword").val(),
                $("#eage").val(),
                $("#ebirthday").val(),
            ];

            data[editIndex] = row;

            console.log(editIndex)
            console.log(row)

            showList();

            clearInput();

            $("#editModal").modal("hide");
        }
    );


    $("#deleteMulti").click(function () {
        $("input[type='checkbox']").each(function () {
            if ($(this).is(":checked")) {
                let index = $(this).attr("value");
                data.splice(index, 1);
            }
        })
        showList();
    });


    function search() {
        let search_type = $("#search_type").val();
        let keyword = $("#keyword").val();
        let arr = new Array();

        switch (search_type) {
            case "number":
                for (let i = 0; i < data.length; i++) {
                    if (data[i][0] == keyword) {
                        arr.push(data[i]);
                    }
                }
                break;
            case "name":
                for (let i = 0; i < data.length; i++) {
                    if (data[i][1] == keyword) {
                        arr.push(data[i]);
                    }
                }
                break;
        }

        showList(arr);
    }


    $("#search_button").click(function () {
            search();
        }
    )


    $('#keyword').bind('keypress', function (event) {
        if (event.keyCode == 13) {
            search();
        }
    });


    $(document).on("click", "button[name='editButton']",
        function () {
            editIndex = $(this).attr("value");
        }
    );


    function clearInput() {
        $("input").val("");
    }


</script>
</html>